<template>
	<view :style="{height:navBarHeight + 'px'}" class="music">
		<view v-if="icon" class="music-head-icon" :class="{'music-head-iconblack' : iconblack}"
			:style="{height:menuHeight + 'px',lineHeight:menuHeight + 'px',top:menuTop + 'px',left:menuRight + 'px'}">
			<text class="iconfont iconzuojiantou-copy" @tap="handleToBack"></text>|<text class="iconfont iconshouye"
				@tap="handleToHome"></text>
		</view>
		<view class="music-head" :style="{color:color,height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}" >
			<view :style="{'background-image' : 'url(' + img +')'}" class="fixbg1" >
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "muics",
		data() {
			return {
				navBarHeight: getApp().globalData.navBarHeight, //导航栏高度
				menuBotton: getApp().globalData.menuBotton, //导航栏距离顶部距离
				menuRight: getApp().globalData.menuRight, //导航栏距离右侧距离
				menuHeight: getApp().globalData.menuHeight, //导航栏高度
				menuTop: getApp().globalData.menuTop //按钮顶部位置
			}
		},
		props: ['title', 'icon', 'color', 'iconcolor', 'img'],
		methods: {
			handleToBack() {
				uni.navigateBack()
			},
			handleToHome() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		},
		onLoad() {}
	}
</script>

<style scoped>
	.fixbg1 {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center 0;
		filter: blur(20px);
		transform: scale(1.2);
	}
	.music-head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: black;
		/* filter: blur(20px); */
		/* transform: scale(1.2); */
	}

	.music-head-icon {
		position: fixed;
		/* left: 8px; */
		/* top: 56px; */
		line-height: 30px;
		width: 90px;
		/* height:30px; */
		background: rgba(0, 0, 0, 0.3);
		color: white;
		border-radius: 20px;
		display: flex;
		justify-content: space-evenly;
		z-index: 1000;
		/* justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置 */
	}

	.music-head-iconblack {
		color: black;
		border: 1px #eaeaea solid;
		background: white;
	}
</style>
